<template >
    <div class="searchDialog">
        <div>
            <el-form
                label-width="100px"
                :model="searchForm"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="机构：">
                            <el-input
                                v-model="searchForm.input"
                                placeholder="请输入内容"
                                size="mini"
                            >
                            <i slot="suffix" class="el-input__icon el-icon-document-copy"></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="机构：">
                            <el-input
                                v-model="searchForm.input"
                                placeholder="请输入内容"
                                size="mini"
                            >
                            <i slot="suffix" class="el-input__icon el-icon-document-copy"></i>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态：">
                            <el-select v-model="searchForm.value3" size="mini" placeholder="请选择活动区域" :clearable="false" :popper-append-to-body="false" >
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态：">
                            <el-select v-model="searchForm.value3" size="mini" placeholder="请选择活动区域" :clearable="false" :popper-append-to-body="false" >
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                       <el-form-item label="计划日期：">
                            <div style="display:flex">
                                <el-date-picker v-model="searchForm.value1" size="mini" style="flex:1"> </el-date-picker>
                                <span class="separate">—</span>
                                <el-date-picker arrow-control v-model="searchForm.value2" size="mini"  style="flex:1">
                                </el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- <div class="footer-btn">
           <div class="buttons">
                <el-button type="primary" size="small" class="btn-blue">重置</el-button>
                <el-button
                    type="primary"
                    size="small"
                    class="btn-blue"
                >保存</el-button>
                <el-button size="small" @click="handleClose">取消</el-button>
            </div>
        </div> -->
        <div style="display: none;">{{localSearchData}}</div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    data () {
        return {
            searchForm: {
                input: '',
                value1: '',
                value2: '',
                value3: '',
            },
            dialogVisibleSearch: false
        }
    },
    computed: {
        localSearchData () {
            // 默认设置搜索标志为false，则不进行搜索回调
            const searchForm = this.searchForm
            searchForm.searching = false
            this.setSearchData(searchForm)
            return searchForm
        }
    },
    mounted () {
    },
    methods: {
        ...mapMutations(['setSearchData']),
        handleClose () {
            this.$router.push('/')
        }
    },
}
</script>

<style lang="scss" scoped>

</style>